import { Row, Col, Card } from 'antd';
import VideoCard from '../../components/VideoCard';

const style = { background: '#0092ff', padding: '8px 0' };

/**
 * 首页分类
 */
const Classify = (props) => {
    return (
        <div >
            <Row>
                <Col xs={4} sm={4} md={6} lg={6} xl={6}>
                    <PopularClassify />
                </Col>
                <Col xs={16} sm={16} md={12} lg={12} xl={12}>
                    <MainClassify />
                </Col>
                <Col xs={4} sm={4} md={6} lg={6} xl={6}>
                    <FriendshipClassify />
                </Col>
            </Row>,
        </div>
    )
}


/**
 * 热门分类
 * @param {*} props 
 * @returns 
 */

const PopularClassify = (props) => {
    return (
        <div className="classify-popular">
            <Row gutter={16}>
                <Col className="gutter-row" span={6}>
                    <div style={style}>col-6</div>
                </Col>
                <Col className="gutter-row" span={6}>
                    <div style={style}>col-6</div>
                </Col>
                <Col className="gutter-row" span={6}>
                    <div style={style}>col-6</div>
                </Col>
                <Col className="gutter-row" span={6}>
                    <div style={style}>col-6</div>
                </Col>
            </Row>
        </div>
    )
}
/**
 * 主要分类
 * @param {*} props 
 * @returns 
 */
const MainClassify = (props) => {
    return (
        <div className="classify-main">
              <Row gutter={16}>
                <Col className="gutter-row" span={4}>
                    <div style={style}>col-6</div>
                </Col>
                <Col className="gutter-row" span={4}>
                    <div style={style}>col-6</div>
                </Col>
                <Col className="gutter-row" span={4}>
                    <div style={style}>col-6</div>
                </Col>
                <Col className="gutter-row" span={4}>
                    <div style={style}>col-6</div>
                </Col>
                <Col className="gutter-row" span={4}>
                    <div style={style}>col-6</div>
                </Col>
                <Col className="gutter-row" span={4}>
                    <div style={style}>col-6</div>
                </Col>
                <Col className="gutter-row" span={4}>
                    <div style={style}>col-6</div>
                </Col>
                <Col className="gutter-row" span={4}>
                    <div style={style}>col-6</div>
                </Col>
                <Col className="gutter-row" span={4}>
                    <div style={style}>col-6</div>
                </Col>
                <Col className="gutter-row" span={4}>
                    <div style={style}>col-6</div>
                </Col>
                <Col className="gutter-row" span={4}>
                    <div style={style}>col-6</div>
                </Col>
            </Row>
        </div>
    )
}
/**
 * 友情链接
 * @param {*} props 
 * @returns 
 */
const FriendshipClassify = (props) => {
    return (
        <div className="classify-friendship">
             <Row gutter={16}>
                <Col className="gutter-row" span={6}>
                    <div style={style}>col-6</div>
                </Col>
                <Col className="gutter-row" span={6}>
                    <div style={style}>col-6</div>
                </Col>
                <Col className="gutter-row" span={6}>
                    <div style={style}>col-6</div>
                </Col>
                <Col className="gutter-row" span={6}>
                    <div style={style}>col-6</div>
                </Col>
            </Row>
        </div>
    )
}

export default Classify;